@import "base.less";

body {
  background-color: #f7f7f7;
  padding-bottom: 14.1333vw;
}

// detail
.detail {
  display: none;
  .flex;
  text-align: center;
  justify-content: center;
  align-items: center;
  .detailCont {
    display: none;
    padding-top: 30.6667vw;
    font-size: 4vw;
    .iconfont {
      font-size: 7vw;
    }
    p {
      margin-top: 4vw;
    }
  }
}

//轮播图
.banner {
  height: 100vw;
  position: relative;
  overflow: hidden;
  .index {
    position: absolute;
    right: 4.8vw;
    bottom: 9.6vw;
    padding: 0.2667vw 2.4vw;
    background: rgba(0, 0, 0, 0.363);
    border-radius: 6.6667vw;
    color: #fff;
    font-size: 3.4667vw;
    z-index: 99999;
  }
}

// 商品详情
.goodDetail {
  background-color: #fff;
  margin-top: 3.2vw;
  padding: 3.2vw 0;
  .price {
    .flex;
    padding: 0 4vw;
    .priceLeft {
      span {
        font-size: 3.4667vw;
        line-height: 1;
        color: #fa2209;
        margin-bottom: -1.3333vw;
      }
      i {
        color: #fa2209;
        margin-right: 1.8667vw;
        font-size: 5.6vw;
      }
      b {
        font-size: 3.4667vw;
        text-decoration: line-through;
        color: #959595;
        margin-right: 1.8667vw;
        margin-bottom: -0.8vw;
        font-weight: normal;
      }
    }
    .priceRight {
      font-size: 3.2vw;
      color: #959595;
    }
  }
  .goodD {
    padding: 0 4vw;
    margin-top: 2.6667vw;
    font-size: 4vw;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
  .Asale {
    margin-top: 3.2vw;
    background-color: #fafafa;
    padding: 3.2vw 4vw;
    .flex;
    justify-content: flex-start;
    font-size: 3.4667vw;
    color: #fa2209;
    .iconfont {
      font-size: 3.4667vw;
      color: #fa2209;
    }
    p {
      padding-left: 1.6vw;
    }
  }
  .evalute {
    padding: 2.6667vw 4vw;
    .evaluteTit {
      padding: 2.6667vw 0;
      .flex;
      p {
        .fontSize;
      }
      a {
        font-size: 3.2vw;
        color: #999;
      }
    }
    .evaluteCont {
      li {
        padding: 1.8667vw 0.5333vw;
        margin-bottom: 1.3333vw;
        border-bottom: 1px solid #f5f5f5;
        .evaluteTop {
          .flex;
          justify-content: flex-start;
          img {
            width: 6.6667vw;
          }
          span {
            margin: 0 1.6vw 0 1.0667vw;
            font-size: 3.2vw;
          }
          .iconfont {
            font-size: 4.2667vw;
            color: rgb(244, 162, 19);
          }
        }
        .evaluteDetail {
          .txt {
            color: #333;
            margin: 2.1333vw 0;
            max-height: 10.1333vw;
            line-height: 5.0667vw;
          }
          .time {
            font-size: 3.2vw;
            color: #999;
            margin-top: 1.3333vw;
          }
        }
      }
    }
  }
  .goodDescription {
    padding: 3.2vw 4vw;
    h3 {
      font-weight: normal;
      font-weight: 3.7333vw;
    }
    img {
      width: 100%;
    }
  }
}

// footer
footer {
  position: fixed;
  z-index: 999;
  background-color: #fff;
  bottom: 0;
  left: 0;
  right: 0;
  height: 14.1333vw;
  text-align: center;
  ul {
    margin-top: 2.6667vw;
    width: 100%;
    .flex;
    justify-content: space-around;
    li {
      a {
        position: relative;
        font-size: 3.2vw;
        .iconfont {
          font-size: 4vw;
        }
        .shopCartNum {
          position: absolute;
          font-size: 3.2vw;
          color: #fff;
          text-align: center;
          line-height: 4.2667vw;
          width: 4.2667vw;
          top: -1.0667vw;
          right: -1.0667vw;
          border-radius: 100%;
          background-color: red;
        }
      }
      &:last-of-type a {
        background: linear-gradient(90deg, #f9211c, #ff6335);
      }
    }
    .footerOpera {
      a {
        display: block;
        width: 33.0667vw;
        height: 9.6vw;
        line-height: 9.6vw;
        border-radius: 9.6vw;
        background-image: linear-gradient(90deg, #ffa600, #fb0);
        color: #fff;
        font-size: 3.7333vw;
      }
    }
  }
}

// 购物车
.addGood,
.afterSale {
  position: fixed;
  bottom: -66.6667vw;
  left: 0;
  right: 0;
  background-color: #fff;
  border-radius: 2.6667vw 2.6667vw 0px 0px;
  transition: all 0.15s linear;
  z-index: 999999999;
  &.cur {
    bottom: 0;
  }
  .close {
    position: absolute;
    top: 4vw;
    right: 3.2vw;
  }
  .addGoodCont,
  .afterSaleCont {
    padding: 4vw 3.2vw;
    .addGoodTop {
      .flex;
      justify-content: flex-start;
      img {
        width: 24vw;
        margin-right: 3.7333vw;
      }
      .addGoodTopR {
        p {
          font-size: 3.2vw;
          color: red;
          span {
            font-size: 6.4vw;
          }
        }
        i {
          color: #525252;
          font-size: 3.2vw;
        }
      }
    }
    .addGoodBot {
      margin-top: 8vw;
      .flex;
      span {
        font-size: 3.7333vw;
      }
      .count {
        .flex;
        button {
          border: none;
          display: block;
          width: 8vw;
          height: 6.9333vw;
          text-align: center;
          line-height: 6.9333vw;
          background: rgb(242, 243, 245);
          color: rgb(50, 50, 51);
          font-size: 3.4667vw;
          &.cur {
            color: #c8c9cc;
            background: #f7f8fa;
          }
        }
        input {
          margin: 0.5333vw;
          width: 10.6667vw;
          height: 6.9333vw;
          text-align: center;
          line-height: 6.9333vw;
          background-color: #f2f3f5;
        }
      }
    }
    .addCart {
      display: block;
      margin: 8vw auto 0 auto;
      width: 95%;
      height: 10.6667vw;
      border-radius: 10.6667vw;
      color: #fff;
      line-height: 10.6667vw;
      text-align: center;
      font-weight: 500;
      font-size: 3.7333vw;
      background: #ff9402;
      &.cur {
        background: linear-gradient(90deg, #f9211c, #ff6335) !important;
      }
    }
  }
}
.afterSale {
  height: 71.7333vw;
  bottom: -71.7333vw;
  h2 {
    font-size: 4vw;
    margin-bottom: 6.6667vw;
    font-weight: 700;
    text-align: center;
    line-height: 5.3333vw;
  }
  li {
    padding-left: 4.5vw;
    margin-bottom: 8vw;
    list-style: none;
    .flex;
    justify-content: flex-start;
    align-items: flex-start;
    .iconfont {
      margin-right: 1.6vw;
    }
    div {
      p {
        line-height: 1;
        .fontSize;
        margin-bottom: 2.6667vw;
      }
      span {
        font-size: 3.4667vw;
        margin-top: 2.6667vw;
        color: #6d6d6d;
      }
    }
  }
}
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999999;
  display: none;
}
